<% if comment && comment.user %>
  <div class="comment-hash-marker" id="<%= comment.id_code_generated %>"></div>
  <div id="comment-node-<%= comment.id %>" class="single-comment-node <%= comment_class(comment,is_view_root) %> <%= "flat-node" if comment.depth > 3 %> comment-deep-<%=comment.depth%>" data-comment-id="<%= comment.id %>" data-comment-author-id="<%= comment_user_id_unless_deleted comment %>">
    <% if comment.deleted %>
      <div class="inner-comment">
        <div class="body" style="padding-bottom:32px;opacity:0.3;user-select:none;cursor:default">
          [deleted]
        </div>
      </div>
    <% else %>
      <div class="inner-comment">
        <div class="details">
          <a href="/<%= comment.user.username %>">
            <img class="profile-pic" src="<%= ProfileImage.new(comment.user).get(50)%>" />
            <span class="comment-username">
              <span class="comment-username-inner">
                <%= comment.user.name %>
              </span>
            </span>
          </a>
          <% if comment.user.twitter_username.present? %>
            <a href="https://twitter.com/<%= comment.user.twitter_username %>" rel="noopener noreferrer" target="_blank"><%= image_tag("twitter-logo.svg", class:"icon-img") %></a>
          <% end %>
          <% if comment.user.github_username.present? %>
            <a href="https://github.com/<%= comment.user.github_username %>" rel="noopener noreferrer" target="_blank"><%= image_tag("github-logo.svg", class:"icon-img") %></a>
          <% end %>
          <% if commentable && (commentable.user_id == comment.user_id ||
                                  commentable.second_user_id == comment.user_id ||
                                  commentable.third_user_id == comment.user_id) &&
                                  commentable.decorate.cached_tag_list_array.include?("ama") %>
            <span class="op-marker">ASK ME ANYTHING</span>
          <% end %>
          <div class="comment-date">
            <a href="<%= comment.path %>"><%= comment.readable_publish_date %></a>
          </div>
          <button class="dropbtn">
            <%= image_tag("chevron-down.svg", class: "dropdown-icon") %>
          </button>
          <div class="dropdown">
            <div class="dropdown-content">
              <a href="<%= comment.path %>">
                Permalink
              </a>
              <span class="mod-actions hidden" style="display:none">
                <a href="<%=comment.path%>/mod" class="edit-butt" rel="nofollow" style="color:#0a0a0a">Moderate</a>
              </span>
              <a href="/report-abuse?url=https://dev.to<%= comment.path %>">Report Abuse</a>
            </div>
          </div>
        </div>
        <div class="body">
          <%= comment.processed_html.html_safe %>
          <button class="reaction-button" id="button-for-comment-<%= comment.id %>" data-comment-id="<%= comment.id %>" title="heart">
            <%= image_tag "favorite-heart-outline-button.svg" %>
           <img class="voted-heart" src="<%= asset_path("emoji/emoji-one-heart.png") %>"/>
          </button>
        </div>
        <div class="actions" data-comment-id="<%= comment.id %>" data-path="<%=commentable.path%>/comments/<%= comment.id_code_generated %>">
          <% if user_signed_in? %>
            <span class="current-user-actions hidden" style="display:none">
              <a data-no-instant href="<%=commentable.path%>/comments/<%= comment.id_code_generated %>/delete_confirm" class="edit-butt" rel="nofollow">DELETE</a>
              <a href="<%=commentable.path%>/comments/<%= comment.id_code_generated %>/edit" class="edit-butt" rel="nofollow">EDIT</a>
            </span>
          <% end %>
          <% if comment.depth < 2 || comment.is_childless? %>
            <a href="#<%=commentable.path%>/comments/new/<%= comment.id_code_generated %>" class="toggle-reply-form" rel="nofollow">REPLY</a>
          <% else %>
            <a href="#<%=commentable.path%>/comments/new/<%= comment.id_code_generated %>" class="toggle-reply-form thread-indication" rel="nofollow">THREAD</a>
          <% end %>
        </div>
      </div>
    <% end %>
    <% comment.children.includes(:user, :commentable).order("score DESC").each do |child| %>
      <%= render("comments/comment", comment:child, commentable:comment.commentable, is_view_root:false) %>
    <% end %>
  </div>
<% end %>
